// $red: #ff1e56;
// $yellow: #ffac41;
$black: #000000;
$semi: #323232;
$grey: #888;
$light: #b2b2b2;
$grey9: #999;
$line: #ebedf0;
$f7: #f7f7f7;
$f8: #f8f8f8;

$red: #ef1e32;
// $red: #FF5D5D;
$orange: #fa6e4d;
$yellow: #ffbd27;
$purple: #7056F8;
$green: #33D8A0;
$brown: #9E8262;
$blue: #3678FD;

$light-red:#FDE4DF;
$light-orange: #FFF7F2;
$light-green: #E9FFF8;
$light-purple: #F8F6FF;

$mcolor:  $blue;

$ft-11: 22rpx;
$ft-13: 26rpx;
$ft-15: 30rpx;
$ft-17: 34rpx;
$ft-19: 38rpx;
$ft-24: 48rpx;


$border-color:#ebedf0;

.c-semi{color: $semi};
.c-red{color:$red;}
.c-green{color:$green;}
.c-yellow{color:$yellow;}
.c-grey{color:$grey;}
.c-blue{color:$blue;}
.c-purple{color:$purple;}
.bg-f7{background:#f7f7f7;}

@for $i from 9 through 56 {
    .ft-#{$i} { font-size: 2rpx * $i };
    .ftb-#{$i} {font-size: 2rpx * $i; font-weight:bold;}
}
.ft-b{
    font-weight:bold;
}

@for $i from 5 through 50 {
    .p-t-#{$i} {padding-top: 2rpx * $i};
    .p-b-#{$i} {padding-bottom: 2rpx * $i};
    .p-l-#{$i} {padding-left: 2rpx * $i};
    .p-r-#{$i} {padding-right: 2rpx * $i};
    .p-x-#{$i} {padding: 0 2rpx * $i};
    .p-y-#{$i} {padding: 2rpx * $i 0};
    .p-a-#{$i} {padding: 2rpx * $i};
    .m-t-#{$i} {margin-top: 2rpx * $i};
    .m-b-#{$i} {margin-bottom: 2rpx * $i};
    .m-l-#{$i} {margin-left: 2rpx * $i};
    .m-r-#{$i} {margin-right: 2rpx * $i};
    .m-x-#{$i} {margin: 0 2rpx * $i};
    .m-y-#{$i} {margin: 2rpx * $i 0};
    .m-a-#{$i} {margin: 2rpx * $i};
}

.btn-green{border:1rpx solid $green;background:$green;color:#fff;}
.btn-white{border:1rpx solid $border-color;background:#fff;color:$semi;}

// 清除浮动
.clearfix:after{content:"";height:0px;display:block;visibility:hidden;clear:both;}
.fl{float:left;}
.fr{float:right;}

.align{
    &-left{
        text-align: left;
    }
    &-center{
        text-align: center; 
    }
    &-right{
        text-align: right;
    }
}

.flex{
    &-block{
        display:flex;
    }
    &-no{
        display:block;
    }
    &-between{
        display:flex; justify-content: space-between;align-items:center;
        .content{flex:1;}
    }
    &-around{
        display:flex;justify-content: space-around;align-items:center;
    }
}

.line{
    position:relative;
    &:after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1rpx;background:$border-color;transform: scaleY(0.5);}
}
.line-top{
    position:relative;
    &:after{content:'';position:absolute;left:0;top:0;width:100%;height:1rpx;background:$border-color;transform: scaleY(0.5);}
}

.title{
    &-v{
        position:relative;padding-left:20rpx;
        &::before{
            content: '';position:absolute;left:0;top:50%;transform:translateY(-50%);width:8rpx;height:28rpx;background:$mcolor;border-radius: 8rpx;
        }
    }
    &-h{
        position:relative;padding-left:20rpx;
        &::before{
            content: '';position:absolute;left:0;top:50%;transform:translateY(-50%);width:10rpx;height:10rpx;background:$mcolor;
        }
    }
    &-r{
        position:relative;padding-left:20rpx;
        &::before{
            content: '';position:absolute;left:0;top:50%;transform:translateY(-50%);width:20rpx;height:20rpx;border-radius:50%;background:$mcolor;
        }
    }
}

.fly-textarea{
    display:flex;align-items:center;width:100%;background:#fff;padding:20rpx 30rpx;line-height:48rpx;
    .title{max-width: 180rpx;min-width: 180rpx;font-size:28rpx;}
    .text{font-size:28rpx;max-height:200rpx;overflow-y:auto;width:90%;}
    .content{flex: 1;
        .textarea{min-height:48rpx;width:90%;}
    }
}

.fly-card{ // 左右布局
    .item{display:flex;background:#fff;padding:30rpx;position:relative;}
    .thumb{width:160rpx;height:160rpx;overflow:hidden;
        image{width:100%;height:100%;}
    }
    .content{flex:1;margin-left:30rpx;width:calc(100% - 190rpx);
        &:after{content:'';position:absolute;left:30rpx;bottom:0;width:calc(100% - 60rpx);height:1rpx;background:$border-color;transform: scaleY(0.5);}
        .title{font-size:32rpx;}
        .desc{color:$grey;font-size:24rpx;}
    }
}

.fly-cell{
    display:flex;justify-content: space-between;align-items: center;background:#fff;padding:0 30rpx;
    .thumb{
        width: 90rpx;
        image{width:40rpx;height:40rpx;float:left;}
    }
    .content{
        flex:1;display: flex;justify-content: space-between;align-items:center;border-bottom:1rpx solid $border-color;padding: 30rpx 0;line-height:40rpx;
    }
    .value{
        text-align:right; flex:1;
    }
    .title{
        font-size:$ft-17;margin-right:30rpx;max-width:70%;
    }
    .arrow{
        background:none;
        .iconfont{font-size:$ft-17;color:#ddd;}
        image{width:48rpx;height:48rpx;}
    }
    .iconfont{color:#999;}
}

.fly-panel{ // 上中下布局
    background:#fff;margin-bottom:24rpx;border-radius:18rpx;border-radius:16rpx;
    .hd{
        display:flex;align-items: top;padding:32rpx 30rpx;@extend .line;line-height:40rpx;
        .title{flex:1;width: calc(100% - 200rpx);font-size:$ft-17;font-weight:bold;}
        .value{text-align:right;width: 200rpx;font-size:$ft-13;color:$grey;}
    }
    .bd{
        display:flex;flex:1;padding:30rpx;
    }
    
    .ft{
        padding:20rpx 32rpx;text-align:right;@extend .line-top;

    }
}

.bd-li{display:flex;justify-content: flex-start;line-height:54rpx;font-size:30rpx;
    .li-label{color:#999;}
    .li-p{color:#333;flex:1;word-break: break-all;}
}

.ul-li{
    .li{
        position:relative;padding:10rpx 30rpx 10rpx 40rpx;color:#666;
        &:before{content:"";position:absolute;top:26rpx;left:20rpx;width:10rpx;height:10rpx;overflow:hidden;border-radius:50%;background:$blue;}
    }
}

.bottom-bar{
    height:100rpx;background:#fff;padding: 14rpx 30rpx;box-sizing:border-box;display:flex;justify-content: space-between;align-items:center;border-top:1rpx solid $border-color;box-shadow:0 -8rpx 8rpx rgba(0,0,0,0.03);
}

// vant reset
.van-cell{padding-left:30rpx;padding-right:30rpx;}